<template>
	<view class="bind_warp">
		<view class="b_input_warp">
			<view class="b_input_warp_item f f_align_center">
				<view class="b_i_label">姓名</view>
				<input v-model="certName" class="bold" type="text" value="" placeholder="请输入持卡人姓名" />
			</view>
			<view v-if="cardType == '10014002' " class="b_input_warp_item f f_align_center">
				<view class="b_i_label">微信号</view>
				<input v-model="wxAccount" class="bold" type="text" value="" placeholder="请输入你的微信号" />
			</view>
			<view v-else class="b_input_warp_item f f_align_center">
				<view class="b_i_label">支付宝</view>
				<input v-model="alipayAccount" class="bold" type="text" value="" placeholder="请输入你的支付宝账号" />
			</view>
			<view class="b_input_warp_item f">
				<view class="b_i_label">收款码</view>
				<view class="uplaods" v-if="cardImg != ''">
					<i class="iconfont close" @click="deleteFiles">&#xe703;</i>
					<image @click="$wathcImg([cardImg])" class="uplaods" :src="cardImg" mode=""></image>
				</view>
				<image v-else @click="uplaodFiles" class="uplaods" src="/static/ico/upload@2x.png" mode=""></image>
			</view>
			<view class="b_input_warp_item tip f f_align_center nb">
				<i class="iconfont iconzu3932 mr10"></i>
				<view class="">信息加密处理，请放心填写</view>
			</view>
		</view>

		<view class="biding_btn bold" @click="addAccountImg">
			确定
		</view>
	</view>
</template>

<script>
	import $uplaod from '@/utils/upload.js'
	export default {
		data() {
			return {
				cardType:'10014002',
				certName:'',
				alipayAccount:'',
				wxAccount:'',
				cardImg:''
			};
		},

		onLoad(option) {
			if(option.type){
				this.cardType = option.type;
				if(option.type == '10014001'){
					uni.setNavigationBarTitle({
						title:'绑定支付宝'
					})
				}
			}
			this.$store.dispatch('getDictlists','card_type');
		},
		methods:{
			//
			deleteFiles(){
				this.cardImg = '';
			},
			//上传图片
			uplaodFiles(){
				const _this = this;
				uni.chooseImage({
					sizeType:['compressed'],
					success(res) {
						_this.cardImg = res.tempFilePaths[0];
					}
				})
			},
			//添加卡
			async addAccountImg(){
				const _this = this;
				if(_this.certName == ''){
					return _this.$showToast('请输入您的真实姓名～');
				}
				if(_this.cardType == '10014001' && _this.alipayAccount == ''){
					return _this.$showToast('请输入支付宝号～');
				}
				if(_this.cardType == '10014002' && _this.wxAccount == ''){
					return _this.$showToast('请输入微信号～');
				}
				if(_this.cardImg == ''){
					return _this.$showToast('请上传收款码图片～');
				};

				_this.cardImg = await $uplaod(_this.cardImg);

				let res = (await _this.$http('/api/auth/user/card/createUserCard','POST',{
					cardType:_this.cardType,
					certName:_this.certName,
					alipayAccount:_this.cardType == '10014001'? _this.alipayAccount : '',
					wxAccount:_this.cardType == '10014002'? _this.wxAccount : '',
					cardImg:_this.cardImg
				})).data;

				if(res && res.code == '0'){
					_this.$showToast(_this.cardType == '10014001' ? '绑定支付宝成功～' : '绑定微信成功～');
					_this.certName = '';
					_this.alipayAccount = '';
					_this.wxAccount = '';
					_this.cardImg = '';
				}else{
					_this.$showToast(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bind_warp{
		width: 100%;
		min-height: 100vh;
		background-color: #F6F6F6;
		border-top: solid 2rpx #E6E6E6;

		.b_w_t{
			padding: 24rpx;
			font-size: 24rpx;
			color: #B8B8B8;
		}
		.b_input_warp{
			padding: 0 24rpx;
			background-color: #fff;
			margin-top: 24rpx;
			.b_input_warp_item{
				padding: 32rpx 0;
				font-size: 28rpx;
				color: #333;
				border-top: solid 2rpx #E6E6E6;
				.b_i_label{
					width: 150rpx;
				}
				&.nb{
					border-top: none;
				}
				&:first-child{
					border-top: none;
				}
				&.tip{
					font-size: 24rpx;
					color: #999999;
					padding: 24rpx 0;
				}
				.uplaods{
					width: 168rpx;
					height: 168rpx;
					position: relative;
					.iconfont{font-size: 44rpx;}
					.iconfont.close{
						position: absolute;
						font-size: 48rpx;
						top:-15rpx;right: -15rpx;
						color: #FD2929;
						z-index: 10;
					}
				}
			}
		}
		.biding_btn{
			margin-top: 150rpx;
		}
	}
</style>
